/* Selector
–––––––––––––––––––––––––––––––––––––––––––––––––– */
function Selector (selector) {
  const nodes = document.querySelectorAll(selector);
  if(nodes.length === 1) { return nodes[0]; }
  return [...(nodes || [])];
}


/* Charts Utilitys
–––––––––––––––––––––––––––––––––––––––––––––––––– */
const Charts = {
  echarts,
  getPieOption (chartName, data) {
    return {
      series:[{
        name: chartName,
        label: {
          fontSize: 14,
          normal: {
            show: true,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: 14,
              fontWeight: 'bold'
            }
          }
        },
        type: 'pie',
        radius:['50%', '60%'],
        color: ['#008573', '#ddd'],
        data,
      }]
    }
  },
  getWordCloudOption () {}
};


/* Animation Methods
–––––––––––––––––––––––––––––––––––––––––––––––––– */
const Animation = {
  fadeScrollTo (start, end = 0, time = 0) {
    Animation.easeTimeFunction(end - start, time, step, final);

    function step (d) {
      window.scrollTo(0, window.scrollY + d);
    }

    function final () {
      window.scroll(0, end);
    }
  },

  easeTimeFunction (delta, spend, callback, final) {
    function d (t) {
      return 0.5 * delta * (1 - Math.cos(Math.PI * t / spend));
    }

    const totalFrame = Math.ceil(spend / 15);
    let currentTimestamp = 0, currentFrame = 0;
    
    // Stop old Animation
    if (window.__timerRecord__) { clearInterval(window.__timerRecord__); }
    
    window.__timerRecord__ = setInterval(() => {
      if (currentFrame >= totalFrame) {
        clearInterval(window.__timerRecord__);
        if(final && typeof final === 'function') {
          final();
        }
      } else {
        callback(d(currentTimestamp + 15) - d(currentTimestamp));
        currentTimestamp += 15;
        currentFrame++;
      }
      console.log(window.scrollY);
    }, 15);
  }
};


/* Main
–––––––––––––––––––––––––––––––––––––––––––––––––– */
(function (JQuery, $, Charts, Animation) {

const {echarts, getPieOption, getWordCloudOption} = Charts;
const {fadeScrollTo} = Animation;


/* Scroll page
–––––––––––––––––––––––––––––––––––––––––––––––––– */
const navItem = $('#navbar .navbar-list .navbar-item a');

navItem.forEach(link => {
  if(link.href.indexOf('#') >= 0) {
    const selector = link.href.replace(/^[\S]*#/, '#');
    const target = $(selector);

    // Bind scroll event for hash nodes
    link.addEventListener('click', e => {
      e.preventDefault();
      // fadeScrollTo(target, target.offsetTop, 100);
      fadeScrollTo(window.scrollY, target.offsetTop, 500);
    }, false);
  }
})


/* Navbar animation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
document.addEventListener('scroll', e => {
  if(window.scrollY > 50) {
    $('#navbar').classList = 'navbar shadow';
  } else {
    $('#navbar').classList = 'navbar';
  }
}, false);


/* Skills
–––––––––––––––––––––––––––––––––––––––––––––––––– */
// DOM Containers
const chartsWrapper = [$('#html'), $('#css'), $('#javascript'), $('#vue')];

// Charts Options
const chartsOptions = [
  getPieOption('HTML', [{value: 70, name: 'HTML'}, {value: 30, name: ''}]),
  getPieOption('CSS', [{value: 60, name: 'CSS'}, {value: 40, name: ''}]),
  getPieOption('JavaScript', [{value: 85, name: 'JavaScript'}, {value: 15, name: ''}]),
  getPieOption('Vue', [{value: 80, name: 'Vue'}, {value: 20, name: ''}])
];

chartsWrapper.map((wrapper, index) => {
  echarts.init(wrapper).setOption(chartsOptions[index]);
});

}) ($, Selector, Charts, Animation);
